<template>
    <div class='application-container'>
        <!-- <MainLayout/>
        <BlankLayout/> -->
        <!-- 动态组件 -->
        <component :is="layoutName"/>
    </div>
</template>

<script>
export default {
    watch: {
        // Failed watching path: "$store.getters['common/menuList']" Watcher only accepts simple dot-delimited paths. 
        // For full control, use a function instead.
        // "$store.getters['common/menuList']"() {}
        menus(val) {
            let menuList = val.filter(it => !!it.path)
            let routes = menuList.map(it => {
                // ./home => it.path === '/home'
                return {path: it.path, component: (() => import('.' + it.path))}
            })
            this.$router.addRoutes(routes)
        },
        // pathName(value){
        //     if(value !== '/shop/detail'){
        //         console.log('监听到了变化')
        //         sessionStorage.removeItem('detail')
        //     }
        // }
    },
    computed: {
        layoutName() {
            // 根据不同的路由可以确认不同页面的展示情况--路由可以传参，其中meta参数定义后就不可以修改
            // 所以可以在meta中定义当前页面的路由容器组件
            // return 'BlankLayout' : 'MainLayout'
            return this.$route.meta.layout || 'MainLayout'
        },
        menus() {
            return this.$store.getters['common/menuList']
        },
        // pathName(){
        //     return window.location.pathname
        // }
    },
}
</script>